<template>
  <div class="report-container">
    <div class="report-title">
      <h3>数字化工厂-工单进度看板</h3>
      <div class="report-table-header">
        <div class="left-data">
          <span>在制工单数: {{ headerInfo.inMakingNum }}</span>
          <span>超期工单数: {{ headerInfo.exceedTimeNum }}</span>
          <span>开工率: {{ headerInfo.rateOfOperation }}</span>
          <span>计划达成率: {{ headerInfo.planCompletePercentage }}</span>
        </div>
      </div>
    </div>
    <div class="report-main">
      <div class="report-table">
        <div class="table-header">
          <div class="table-line header-line">
            <div class="line-cell cell1">工单</div>
            <div class="line-cell cell2">物料</div>
            <div class="line-cell cell3">数量</div>
            <div class="line-cell cell4">物料名称</div>
            <div class="line-cell cell5">物料规格</div>
            <div class="line-cell cell6">SFC条码</div>
            <div class="line-cell cell7">SFC数量</div>
            <!--            <div class="line-cell cell8">SFC状态</div>-->
            <template v-for="(ma, maIndex) in maxList">
              <div :key="maIndex" class="line-cell cell9">工序{{ ma+1 }}</div>
            </template>
          </div>
        </div>
        <div ref="tableContent" class="table-content">
          <template v-for="(item, index) in tableData">
            <div :key="index" class="table-line content-line">
              <div class="line-cell cell1">{{ item.shopOrder }}</div>
              <div class="line-cell cell2">{{ item.item }}</div>
              <div class="line-cell cell3">{{ item.orderQty }}</div>
              <div class="line-cell cell4">{{ item.itemName }}</div>
              <div class="line-cell cell5">{{ item.itemDesc }}</div>
              <div class="line-cell cell6">{{ item.sfc }}</div>
              <div class="line-cell cell7">{{ item.sfcQty }}</div>
              <!--              <div class="line-cell cell8">{{ item.state }}</div>-->
              <template v-for="(ma, maIndex) in maxList">
                <div :key="maIndex" class="line-cell cell9">
                  <p>{{ item['operationVo' + (ma+1)] ? `名称：` + item['operationVo' + (ma+1)].name : '' }}</p>
                  <p>{{ item['operationVo' + (ma+1)] ? `进度：` + item['operationVo' + (ma+1)].completeProportion * 100 + '%' : '' }}</p>
                </div>
              </template>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  selectBeyondWorkOrder, selectRateOperation, selectWorkOrder, workOrderDashboard
} from '@/api/service-module/report/workOrderDashboard'
import {connectWebsocket, sendMessage} from "@/api/websocket";
export default {
  name: 'WorkOrderPlanDashboard',
  data() {
    return {
      nowDate: null,
      headerInfo: {
        inMakingNum: null, // 在制数
        exceedTimeNum: null, // 超期数
        rateOfOperation: null, // 开工率
        planCompletePercentage: null // 开工率
      },
      tableData: [],
      maxList: [],
      listQuery: {
        actionAcope: '1',
        page: { current: 1, size: 50 }
      },
      tableHeight: 0,
      MyMar: null
    }
  },
  created() {
    // this.selectWorkOrderDashboard()
    // this.selectWorkOrderNum()
    this.rollText()
    this.initWebData()
    this.reloadWeb()
  },
  mounted() {
    // this.timer = setInterval(this.initMethod, 1000 * 60)
  },
  destroyed() {
    // window.clearInterval(this.timer)
  },
  methods: {
    reloadWeb(){
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload,1000*60*60*8)
    },
    initWebData() {
      connectWebsocket(
        // 测试地址
        process.env.VUE_APP_WS_URL+'/shopOrderWebSocket/shopOrder',
        // 传递给后台的数据
        {},
        // 成功拿到后台返回的数据的回调函数
        (data) => {
          // this.tmp = JSON.parse(data)
          console.log(JSON.parse(data))
          this.tableData = JSON.parse(data)[3].shopOrderTrackList
          this.maxList = []
          if (JSON.parse(data).maxNum >= 0) {
            const num = JSON.parse(data).maxNum > 3 ? 3 : JSON.parse(data).maxNum
            for (let i = 0; i < num; i++) {
              this.maxList.push(i)
            }
          }

          this.headerInfo.inMakingNum = JSON.parse(data)[1].WorkOrder
          this.headerInfo.exceedTimeNum = JSON.parse(data)[2].beyondWorkOrder
          this.headerInfo.planCompletePercentage = JSON.parse(data)[0].rateOperation + '%'
        },
        () => {
          sendMessage("im tird!")
        }
      )
    },
    initMethod() {
      this.selectWorkOrderDashboard()
      this.selectWorkOrderNum()
    },
    rollText() {
      var speed = 300
      var that = this
      var tmpHi = 0
      function Marquee() {
        if (that.$refs.tableContent) {
          tmpHi = that.$refs.tableContent.scrollTop++
          if (tmpHi === that.$refs.tableContent.scrollTop) {
            that.$refs.tableContent.scrollTop = 0
          }
        }
      }
      setInterval(Marquee, speed)
    },
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    },
    async selectWorkOrderDashboard() {
      workOrderDashboard(this.listQuery).then(resp => {
        if (resp.code === '200') {
          this.tableData = resp.data.shopOrderTrackList
          this.maxList = []
          if (resp.data.maxNum >= 0) {
            const num = resp.data.maxNum > 3 ? 3 : resp.data.maxNum
            for (let i = 0; i < num; i++) {
              this.maxList.push(i)
            }
          }
          if (resp.data.shopOrderTrackList && resp.data.shopOrderTrackList.length === 0) {
            this.listQuery.page.current = 0
            this.selectWorkOrderDashboard()
          }
        }
      })
    },
    selectWorkOrderNum() {
      selectWorkOrder().then(resp => {
        this.headerInfo.inMakingNum = resp.data.WorkOrder
      })
      selectBeyondWorkOrder().then(resp => {
        this.headerInfo.exceedTimeNum = resp.data.beyondWorkOrder
      })
      selectRateOperation().then(resp => {
        this.headerInfo.planCompletePercentage = resp.data.rateOperation + '%'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* 小分辨率设备 (平板、电视机或者安卓设备, 960px and down) */
@media only screen and (max-width: 960px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 0.5rem;

    .report-title {
      width: 100%;
      color: #F2F6FC;

      h3 {
        padding-left: 2rem;
        font-size: 2.5em;
      }

      p {
        margin-top: 0;
      }

      .report-table-header {
        .left-data {
          margin-left: 2rem;
          font-size: 0.5rem;
          margin-top: -1rem;
          span {
            margin-right: 8rem;
          }
        }

        .right-data {
          width: 50%;
          text-align: right;

          span {
            margin-right: 20px;
            margin-left: 40px;
            color: #20a0ff;
            font-weight: bolder;
          }
        }
      }
    }

    .report-main {
      height: calc(100% - 60px);
      padding: 10px 20px;

      .report-table {
        border: 1px solid rgba(19, 88, 88, 0);
        height: 100%;
        position: relative;

        .table-header {
          color: #f9fbfc;
          font-weight: bolder;
          background: rgba(56, 93, 139, 0);
          overflow: hidden;

          .table-line {
            height: 100%;
            width: 100%;
            display: flex;

            .line-cell {
              padding: 2px 4px;
              border: 1px solid rgba(231, 8, 158, 0);
              min-width: 100px;
              word-wrap: break-word;
            }

            .cell1 {
              width: 14/110 * 100%
            }

            .cell2 {
              width: 14/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell3 {
              min-width: 40px;
              width: 4/110 * 100%
            }

            .cell4 {
              width: 1/11 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell5 {
              width: 24/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell6 {
              width: 14/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell7 {
              min-width: 60px;
              width: 6/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell9 {
              min-width: 120px;
              width: 12/110 * 100%
            }
          }
        }

        .table-content {
          //position: absolute;
          //margin-top: 50px;
          height: calc(100% - 30px);
          color: #ffffff;
          overflow: hidden;

          .table-line:nth-of-type(odd) {
            background: rgba(122, 178, 203, 0.37);
          }

          .table-line:nth-of-type(even) {
            background: rgba(153, 203, 122, 0.27);
          }

          .table-line {
            margin-top: 0.3rem;
            position: relative;
            width: 100%;
            display: flex;
            border: 2px solid #ffffff;
            border-radius: 5px;
            font-size: 0.7rem;
            .line-cell {
              min-width: 100px;
              word-wrap: break-word;
            }

            .cell1 {
              width: 14/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell2 {
              width: 14/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell3 {
              min-width: 40px;
              width: 4/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell4 {
              width: 1/11 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell5 {
              width: 24/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell6 {
              width: 14/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell7 {
              min-width: 60px;
              width: 6/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell9 {
              min-width: 120px;
              width: 12/110 * 100%;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }
          }
        }
      }
    }
  }
}

/* 大分辨率设备 (工作站或者台式机, 961px and up) */
@media only screen and (min-width: 961px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    font-size: 12px;
    margin-top: -3vh;
    .report-title {
      width: 100%;
      color: #F2F6FC;

      h3 {
        padding-left: 2rem;
        font-size: 2.5em;
      }

      p {
        margin-top: 0;
        margin-top: -1rem;
      }

      .report-table-header {
        .left-data {
          margin-left: 2rem;
          font-size: 1rem;
          span {
            margin-right: 8rem;
          }
        }

        .right-data {
          width: 50%;
          text-align: right;

          span {
            margin-right: 20px;
            margin-left: 40px;
            color: #20a0ff;
            font-weight: bolder;
          }
        }
      }
    }

    .report-main {
      height: 92.5vh;
      padding: 10px 20px;
      font-size: x-large;

      .report-table {
        border: 1px solid rgba(19, 88, 88, 0);
        height: 100%;
        position: relative;

        .table-header {
          color: #f9fbfc;
          font-weight: bolder;
          background: rgba(56, 93, 139, 0);
          overflow: hidden;

          .table-line {
            height: 100%;
            width: 100%;
            display: flex;

            .line-cell {
              padding: 2px 4px;
              border: 1px solid rgba(231, 8, 158, 0);
              min-width: 100px;
              word-wrap: break-word;
            }

            .cell1 {
              width: 14/110 * 100%
            }

            .cell2 {
              width: 14/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell3 {
              min-width: 40px;
              width: 4/110 * 100%
            }

            .cell4 {
              width: 1/11 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell5 {
              width: 24/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell6 {
              width: 14/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell7 {
              min-width: 60px;
              width: 6/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell9 {
              min-width: 120px;
              width: 12/110 * 100%
            }
          }
        }

        .table-content {
          //position: absolute;
          //margin-top: 50px;
          height: calc(100% - 50px);
          color: #ffffff;
          overflow: hidden;

          .table-line:nth-of-type(odd) {
            background: rgba(122, 178, 203, 0.22);
          }

          .table-line:nth-of-type(even) {
            background: rgba(153, 203, 122, 0.22);
          }

          .table-line {
            margin-top: 0.3rem;
            position: relative;
            width: 100%;
            display: flex;
            border: 3px solid rgb(255, 255, 255);
            border-radius: 5px;
            .line-cell {
              min-width: 100px;
              word-wrap: break-word;
            }

            .cell1 {
              width: 14/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell2 {
              width: 14/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell3 {
              min-width: 40px;
              width: 4/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell4 {
              width: 1/11 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell5 {
              width: 24/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell6 {
              width: 14/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell7 {
              min-width: 60px;
              width: 6/110 * 100%;
              display: flex;
              align-items: center;
              text-align: center;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }

            .cell9 {
              min-width: 120px;
              width: 12/110 * 100%;
              padding-top: -0.5rem;
              padding-bottom: -0.5rem;
            }
          }
        }
      }
    }
  }
}
</style>
